
function setStyle(dom, stypes){

	for (const key in stypes) {
		dom.style[key] = stypes[key]
	}
}


window.onload=function(){

	var isCdOpen = true;
	//求topleft的函数
	function topl(ir,deg){
		Math.round(Math.sin(deg/180*Math.PI)*ir)
		return {l:Math.round(Math.sin(deg/180*Math.PI)*ir),
			t:Math.round(Math.cos(deg/180*Math.PI)*ir)
		}
	}

	function cdLiMove(){
		if(isCdOpen){
			//小元素退回
			for(var i=0;i<domCdLi.length;i++){
				domCd.style.transform="rotate(0deg)";

				setStyle(domCdLi[i],{
					transition: "0.5s " + i * 0.1 + "s ease-in-out",
					left: "0",
					top: "0",
					transform: "rotate(0deg)",
					opacity: "0"
				})
			}
			isCdOpen = false;
		}else{
			domCd.style.transform="rotate(-360deg)";
			isCdOpen = true;
			//小元素飞出
			for(var i=0;i<domCdLi.length;i++){
				var olt=topl(150,180-(180/5*(i+1)));
				setStyle(domCdLi[i],{
					transition: "0.5s " + i * 0.1 + "s ease-in-out",
					left: olt.l + "px",
					top: olt.t + "px",
					transform: "rotate(-360deg)",
					opacity: "1"
				})
			}
		}	
	}

	//元素获取
	var domCd = document.getElementById('caidan'); //菜单按钮
	var domCdLi = getclass('nav')[0].getElementsByTagName('li');
	var domCntentLi = getclass('nav_content')[0].getElementsByTagName('li');

	var btnToCont2 = document.getElementById('to-cont2');
	var btnToCont1 = document.getElementById('to-cont1');
	var domJieShao = document.getElementById('jieshao');
	var domWrap = document.getElementById('wrap');

	// =========== 事件绑定 ==========
    //进入内容区2
	btnToCont2.onclick=function(){
		domWrap.style.top='-100%';

		setTimeout(function(){
			domJieShao.style.display='none';
			domCd.style.transform="rotate(-360deg)";
			isCdOpen = false;
			//小元素飞出
			cdLiMove()
			//第一文字浮现
			domCntentLi[0].className="li_active";
		},1000);  
	}
	//进入内容区1
	btnToCont1.onclick=function(){
		domWrap.style.top=0;
    	setTimeout(function(){
    		jieshao.style.display='block';
			isCdOpen = true;
			cdLiMove()
			//清除文字
			for(var j=0;j<domCntentLi.length;j++){
				domCntentLi[j].className="";
			}
    	},500);
	}
	//菜单按钮
	domCd.onclick=function(){
		cdLiMove()
	}
	//菜单小按钮
	for(var i=0;i< domCdLi.length;i++){
		domCdLi[i].suoyin = i;
		domCdLi[i].onclick = function(){
			var that=this;
			this.style.transition="0.2s";
			this.style.transform="scale(2)";
			this.style.opacity = 0.1
			setTimeout(function(){
				that.style.transform="scale(1)";
				that.style.opacity=1;
			},200)

			for(var j=0; j < domCntentLi.length; j++){
				domCntentLi[j].className = "";
   		}
   		domCntentLi[this.suoyin].className = "li_active";
    }
	}

	moveBackImg('bgbox1')
	moveBackImg('bgbox2')

	function moveBackImg(dom){
		//背景轮播第一页
		var bgBoxs = getclass(dom);
		var moveIndex = 0;  //当前从中间移走的索引
		moveBackImgRev()
		function moveBackImgRev(){
			setTimeout(function(){
				//第0个最先移动，1跟在后面。1走了2跟在后面。
				let clearIndex = moveIndex -1
				if(moveIndex == 0){  //如果当前是第0个在移走，要复原的是最后一个。否则是自己的前一个。
					clearIndex = bgBoxs.length - 1
				}
	
				bgBoxs[clearIndex].classList.remove("bg-pre") 
				bgBoxs[clearIndex].classList.remove("bg-move") //已经走完的进行状态复原。
	
				let pre = moveIndex + 1 //跟在自己后面的，比自己的索引大1
				if(pre >= bgBoxs.length){
					pre = 0  //如果自己已经是最大了，则重置，是第0个跟在后面
				}
				bgBoxs[pre].classList.add("bg-pre")
				bgBoxs[moveIndex].classList.add("bg-move") 
				moveIndex = pre
	
				moveBackImgRev()
			},4000)
		}
	}


	//音乐按钮
	var music= document.getElementsByTagName('audio')[0];
	var musicbox = document.getElementById('musicbox');
	var flag = 0;

	musicbox.onclick = function(){
		if (flag) {
			this.style.backgroundImage="url(./img/pause.png)";
			this.title="点击开始音乐";
			music.pause();
			
			flag=0;
		}else{
			this.style.backgroundImage="url(./img/bofang.gif)";
			music.play();
			this.title="点击暂停音乐";
			flag=1;
		}
	}


}
